<template>
  <div class="home-index-page" ref="page" :style="{height:pageHeight}">
    <div class="block-left">
      <div class="block-left-top"><module-a /></div>
      <div class="block-left-bottom"><module-b /></div>
    </div>
    <div class="block-right"><module-c /></div>
  </div>
</template>

<script>
import ModuleA from './ModuleA.vue'
import ModuleB from './ModuleB.vue'
import ModuleC from './ModuleC.vue'
export default {
  name:'homeIndexPage',
  components:{ModuleA,ModuleB,ModuleC},
  data(){
    return {
      pageHeight:'100%'
    }
  },
  watch:{
    '$store.state.app.multiTab':{
      deep:true,
      handler:(newVal,oldVal)=>{
        this.calPageHeight(newVal)
      }
    }
  },
  methods:{
    calPageHeight(hasTab){
      if (hasTab) {
       let _h = this.$refs.page.clientHeight;
       if (_h) {
         this.pageHeight = (_h-42)+'px'
       }
      } else {
        this.pageHeight = '100%';
      }
    },
    initPageHeight(callback){
      setTimeout(()=>{
        this.calPageHeight(this.$store.state.app.multiTab)
        callback && callback()
      },100)
    }
  },
  mounted(){
    this.initPageHeight()
  }
}
</script>

<style lang="less" scoped>
.home-index-page{
  overflow: hidden;
  display: flex;
  min-width: 1000px;
  .block-right{
    width:30%;
    min-width:300px;
    flex-shrink: 0;
  }
  .block-left{
    flex-grow: 1;
    box-sizing: border-box;
    padding-right: 24px;
    display: flex;
    flex-direction: column;
    .block-left-top{
      flex-shrink: 0;
    }
    .block-left-bottom{
      flex-grow: 1;
    }
  }
}
</style>
